import React from 'react';
import { Button } from 'antd';

import logo from './logo.svg';
import './App.css';
import RedMoney from "./components/redMoney"

class App extends React.Component {
  state={
      count:3,
      documentWidth:0,
      documentHeight:0,
  };
  componentDidMount() {
      // console.log(document.body.offsetWidth);
      // console.log(document.body.offsetHeight);
      this.setState({
          documentWidth:document.body.offsetWidth,
          documentHeight:document.body.offsetHeight,
      });
      this.timer = setInterval(() => {
          this.setState({count: --this.state.count})
      }, 1000)
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
      // console.log(prevProps, prevState, snapshot)
      if(prevState.count<=-1){
          clearInterval(this.timer)
      }
  }
    render() {
        return (
            <div>
                { this.state.count > -1?
                <div className="mask">
                    <div className="yugao">一大波红包即将来袭</div>
                    <div className={"calcCounts"}>{this.state.count}</div>
                </div>
                    :(<RedMoney
                        documentWidth={this.state.documentWidth}
                        documentHeight={this.state.documentHeight}
                    />)
                }
            </div>
        )
  }
}
//
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

export default App;
